<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>H5场景</title>
		<meta name="viewport" content="width=640, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/zepto.fullpage.css"/>
		<link rel="stylesheet" type="text/css" href="css/global.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/h5.css"/>
	</head>
	<body>
		<div class="wp">
			<div class="wp-inner">
				<div class="page page1">
					<h1 class="logo">
						<img src="images/p1/logo.png" alt="" />
					</h1>
					<div class="oneyear js-animate animated" data-animate="bounceInLeft">
						<img src="images/p1/page1_1.png" alt="" />
					</div>
					<div class="dont js-animate animated" data-animate="bounceInRight">
						<img src="images/p1/dont.png" alt="" />
					</div>
					<div class="eleven">
						<img src="images/p1/11.png" alt="" />
					</div>
					<div class="person js-animate animated" data-animate="bounceInDown">
						<img src="images/p1/person.png" alt="" />
					</div>
				</div>
				<div class="page page2">
					<div class="page2-1 js-animate animated" data-animate="bounceInLeft">
						<img src="images/p2/font.png" alt="" />
					</div>
					<div class="page2-2 js-animate animated" data-animate="bounceInDown">
						<img src="images/p2/page2_1.png" alt="" />
					</div>
				</div>
				<div class="page page3">3</div>
				<div class="page page4">4</div>
			</div>
		</div>
		<!--音乐播放-->
		<div class="music-box" style="background: url(images/p1/music_2.gif) no-repeat;">
			<i style="animation:rote 2.5s linear 0s infinite;"></i>
		</div>
		<div class="start">
			<b></b>
		</div>

	</body>
</html>
<script src="js/zepto.min.js"></script>
<script src="js/zepto.fullpage.js"></script>
<script>
	//滚屏效果
	$('.wp-inner').fullpage({
		//改变的时候
		change:function(e){
			//查看当前第几屏
			//e.cur 滚动到了第几屏，获取所在屏的编号
			console.log(e.cur);
			//先把要做动画的元素都隐藏
			//滚动哪一屏幕就让哪一屏幕中的js-animate，隐藏
			$('.page').eq(e.cur).find('.js-animate').each(function(){
				//获取data-animate中的属性值
				
				$(this).addClass($(this).data('animate')).hide();
			})
		},
		afterChange:function(e){
			console.log(e.cur);
			//进入之后，让里边要做动画部分显示
			$('.page').eq(e.cur).find('.js-animate').each(function(){
				$(this).addClass($(this).data('animate')).show();
			});
		}
	});
	
	//声音播放
	var flag = 1;
	//1 当前是开着的，  2表示当前是关闭的
	$('.music-box i').click(function(){
		//alert('ok');
		//如果当前是开，点击关闭，否则开
		if(flag == 1){
			$(this).css('animation','');
			$('.music-box').css('background','');
			//关闭之后，状态也是出于关闭
			flag = 2;
		}else{
			$(this).css('animation','rote 1.5s linear 0s infinite');
			$('.music-box').css('background','url(images/p1/music_2.gif) no-repeat')
;	
			//状态也是开
			flag = 1;
		}
	});
</script>